import React, { useEffect, useState } from 'react';
import { Row, Col, Progress, Typography, Tag } from 'antd';
import { UserOutlined, TrophyOutlined, FileTextOutlined, CloudServerOutlined } from '@ant-design/icons';
import { InfoCard } from '@/components/common';
import { dashboardService } from '@/services/dashboardService';
import { DashboardData } from '@/types/dashboard';
import { useAuthStore } from '@/store/useAuthStore';
import { ADMIN_TYPE_MAP, getDisplayText } from '@/utils/mappings';
import dayjs from 'dayjs';

const { Title, Text } = Typography;

const DashboardPage: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<DashboardData | null>(null);
  const { user } = useAuthStore();

  useEffect(() => {
    fetchDashboardData();
  }, []);

  const fetchDashboardData = async () => {
    try {
      setLoading(true);
      const response = await dashboardService.getDashboardData();
      setData(response.data);
    } catch (error) {
      console.error('Failed to fetch dashboard data:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!data) {
    return <div>Failed to load dashboard data</div>;
  }

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <InfoCard 
            cardType="profile"
            title={`欢迎您，${user?.username || '管理员'}`}
          >
            <div>
              <Text style={{ display: 'block', marginBottom: '8px' }}>
                您是本站的 <Tag color="blue">{getDisplayText(ADMIN_TYPE_MAP, user?.admin_type || '') || '管理员'}</Tag>
              </Text>
              <Text style={{ display: 'block', marginBottom: '8px' }}>
                今天是 {dayjs().format('YYYY年MM月DD日')}，系统运行正常
              </Text>
              <Text type="secondary">
                共 {data.judge_server_count} 个评测服务器在线
              </Text>
            </div>
          </InfoCard>
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        <Col xs={24} sm={12} lg={6}>
          <InfoCard
            cardType="statistic"
            statistic={{
              title: "用户总数",
              value: data.user_count
            }}
            icon={<UserOutlined />}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <InfoCard
            cardType="statistic"
            statistic={{
              title: "进行中的比赛",
              value: data.recent_contest_count
            }}
            icon={<TrophyOutlined />}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <InfoCard
            cardType="statistic"
            statistic={{
              title: "今日提交数",
              value: data.today_submission_count
            }}
            icon={<FileTextOutlined />}
          />
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <InfoCard
            cardType="statistic"
            statistic={{
              title: "评测服务器",
              value: data.judge_server_count
            }}
            icon={<CloudServerOutlined />}
          />
        </Col>
      </Row>

      <Row gutter={[16, 16]} style={{ marginTop: '16px' }}>
        <Col span={12}>
          <InfoCard
            title="操作系统"
          >
            <div>
              <div><strong>系统：</strong>{data.system_info.os.system}</div>
              <div><strong>版本：</strong>{data.system_info.os.version}</div>
              <div><strong>架构：</strong>{data.system_info.os.machine}</div>
            </div>
          </InfoCard>
        </Col>
        <Col span={12}>
          <InfoCard
            title="硬件信息"
          >
            <div>
              <div><strong>CPU核心数：</strong>{data.system_info.hardware.cpu.cores}</div>
              <div><strong>磁盘总容量：</strong>{data.system_info.hardware.disk.total}</div>
              <div><strong>已用空间：</strong>{data.system_info.hardware.disk.used}</div>
              <Progress 
                percent={parseInt(data.system_info.hardware.disk.percent)} 
                status={parseInt(data.system_info.hardware.disk.percent) > 80 ? 'exception' : 'normal'}
                style={{ marginTop: '8px' }}
              />
            </div>
          </InfoCard>
        </Col>
      </Row>
    </div>
  );
};

export default DashboardPage;
